<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米首页</title>
  <link rel="stylesheet" href="./css/homepage1.css">
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">

  <style>
    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: skyblue;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="jacket">
    <!-- 页首 -->
    <header>
      <!-- 搜索 -->
      <div class="search">
        <div class="logo"><img src="./img/logo.png" alt=""></div>
        <!--搜索框 -->

        <div class="searchbox"><a href="">
            <div class="searchbox-icon"><img src="./img/1-2-1.png" alt=""></div>
            <div class="searchbox-txt">搜索商品名称</div>
          </a>
        </div>

        <!-- 我的 -->
        <div class="mine">
          <div class="mine-img-box"><a href="./login.html"><img src="./img/1-3-1.png" alt="登录"></a></div>
        </div>
      </div>
      <!-- 菜单 -->
      <nav class="menu">
        <div class="menu-marquee">
          <div id="menu-marquee1" class="layout default">推荐</div>
          <div id="menu-marquee2" class="layout">智能</div>
          <div id="menu-marquee3" class="layout">电视</div>
          <div id="menu-marquee4" class="layout">家电</div>
          <div id="menu-marquee5" class="layout">笔记本</div>
        </div>
        <div class="expand"><img src="./img/1-4-1.png" alt=""></div>
      </nav>
    </header>
    <!-- 内容 -->
    <main>
      <!-- 轮播图 -->
      <div class="carousel-chart">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper" id="swiper-wrapper">
            <!-- <div class="swiper-slide"><img src="./img/swiper1.png" alt="Slide 1"></div>
            <div class="swiper-slide"><img src="./img/swiper2.png" alt="Slide 2"></div>
            <div class="swiper-slide"><img src="./img/swiper3.png" alt="Slide 3"></div>
            <div class="swiper-slide"><img src="./img/swiper4.png" alt="Slide 4"></div>
            <div class="swiper-slide"><img src="./img/swiper5.png" alt="Slide 5"></div>
            <div class="swiper-slide"><img src="./img/swiper6.png" alt="Slide 6"></div>
            <div class="swiper-slide"><img src="./img/swiper7.png" alt="Slide 7"></div> -->
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <!-- 导航栏 -->
      <nav>
        <ul>
          <li><img src="./img/nav1.png" alt=""></li>
          <li><img src="./img/nav2.png" alt=""></li>
          <li><img src="./img/nav3.png" alt=""></li>
          <li><img src="./img/nav4.png" alt=""></li>
          <li><img src="./img/nav5.png" alt=""></li>
          <li><img src="./img/nav6.png" alt=""></li>
          <li><img src="./img/nav7.png" alt=""></li>
          <li><img src="./img/nav8.png" alt=""></li>
          <li><img src="./img/nav9.png" alt=""></li>
          <li><img src="./img/nav10.png" alt=""></li>
        </ul>
      </nav>
      <div class="empty"></div>
      <!-- 商品区 -->
      <div class="product">
        <!-- 小米手机 -->
        <div class="product-content1">

          <div class="goods">
            <div class="picture">
              <img src="./img/redmi11.png" alt="">
            </div>
            <div class="data">
              <b>Redmi K70</b>
              <p class="txt1">第二代骁龙8 旗舰芯</p>
              <p class="txt2">￥2299起</p>
              <div class="buy">立即购买</div>
            </div>
          </div>
          <!--  -->
          <div class="goods">

            <div class="picture">
              <img src="./img/redmi14.png" alt="">
            </div>
            <div class="data">
              <h3>Redmi K70</h3>
              <p class="txt1">第二代骁龙8 旗舰芯</p>
              <p class="txt2">￥2299起</p>
              <div class="buy">立即购买</div>
            </div>
          </div>
          <!--  -->
          <div class="goods">

            <div class="picture">
              <img src="./img/redmi16.png" alt="">
            </div>
            <div class="data">
              <h3>Redmi K70</h3>
              <p class="txt1">第二代骁龙8 旗舰芯</p>
              <p class="txt2">￥2299起</p>
              <div class="buy">立即购买</div>
            </div>
          </div><!--  -->
          <div class="goods">

            <div class="picture">
              <img src="./img/redmi19.png" alt="">
            </div>
            <div class="data">
              <h3>Redmi K70</h3>
              <p class="txt1">第二代骁龙8 旗舰芯</p>
              <p class="txt2">￥2299起</p>
              <div class="buy">立即购买</div>
            </div>
          </div><!--  -->
          <div class="goods">

            <div class="picture">
              <img src="./img/202309201133c383d4b5b7056bb6467e2ec16f482982.jpg" alt="">
            </div>
            <div class="data">
              <h3>Redmi K70</h3>
              <p class="txt1">第二代骁龙8 旗舰芯</p>
              <p class="txt2">￥2299起</p>
              <div class="buy">立即购买</div>
            </div>
          </div><!--  -->
          <div class="goods">

            <div class="picture">
              <img src="./img/202309201133c383d4b5b7056bb6467e2ec16f482982.jpg" alt="">
            </div>
            <div class="data">
              <h3>Redmi K70</h3>
              <p class="txt1">第二代骁龙8 旗舰芯</p>
              <p class="txt2">￥2299起</p>
              <div class="buy">立即购买</div>
            </div>
          </div><!--  -->
          <div class="goods">

            <div class="picture">
              <img src="./img/202309201133c383d4b5b7056bb6467e2ec16f482982.jpg" alt="">
            </div>
            <div class="data">
              <h3>Redmi K70</h3>
              <p class="txt1">第二代骁龙8 旗舰芯</p>
              <p class="txt2">￥2299起</p>
              <div class="buy">立即购买</div>
            </div>
          </div><!--  -->
          <div class="goods">

            <div class="picture">
              <img src="./img/202309201133c383d4b5b7056bb6467e2ec16f482982.jpg" alt="">
            </div>
            <div class="data">
              <h3>Redmi K70</h3>
              <p class="txt1">第二代骁龙8 旗舰芯</p>
              <p class="txt2">￥2299起</p>
              <div class="buy">立即购买</div>
            </div>
          </div>
          <div class="more">
            更多小米手机产品 >
          </div>
        </div>
        <div class="empty"></div>
        <!-- 笔记本 -->
        <div class="product-content2"></div>
        <!-- 更多 -->
        <div class="product-content3"></div>
      </div>
    </main>
    <!-- 页尾 -->
    <footer>
      <!-- 导航栏 -->
      <nav>
        <a href="./homepage1.html">
          <div class="box">
            <div class="icon">
              🏠
              <!-- <img src="./img/99-1.png" alt=""> -->
            </div>
            <p>首页</p>
          </div>
        </a>
        <a href="./classification.html">
          <div class="box">
            <div class="icon"><img src="./img/99-2.png" alt=""></div>
            <p>分类</p>
          </div>
        </a>
        <a href="./miQ.html">
          <div class="box">
            <div class="icon"><img src="./img/99-3.png" alt=""></div>
            <p>米圈</p>
          </div>
        </a>
        <a href="./miCar.html">
          <div class="box">
            <div class="icon"><img src="./img/99-4.png" alt=""></div>
            <p>购物车</p>
          </div>
        </a>
        <a href="mine.html">
          <div class="box">
            <div class="icon"><img src="./img/99-5.png" alt=""></div>
            <p>我的</p>
          </div>
        </a>

      </nav>
    </footer>
  </div>





  <!-- <script src="./js/homepage.js">  </script> -->
  <script src="./js/swiper.js"></script>
  <script src="./swiper/swiper-bundle.min.js"></script>

  <script>
    var swiper = new Swiper(".mySwiper", {
      autoplay: true, // 自动播放
      pagination: {
        el: ".swiper-pagination",
      },
    });
  </script>
</body>

</html>